<!DOCTYPE html>
<html lang="en">
<link>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2149355_z0iimh6a7me.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body >
    <div class="start">
        <div class="start-kd">
           <div class="start-left">
                <a href="#">米网<span>|</span></a>
                <a href="#">MIUI<span>|</span></a>
                <a href="#">米聊<span>|</span></a>
                <a href="#">游戏<span>|</span></a>
                <a href="#">多看阅读<span>|</span></a>
                <a href="#">云服务<span>|</span></a>
                <a href="#">小米网移动版<span>|</span></a>
                <a href="#">Select region<span>|</span></a>
                <a href="#">米粉节答疑</a>
          </div>

          <div class="start-right">
              <a href="#">注册<span>|</span></a>
              <a href="#">登录</a>
          </div>
       </div>
    </div>

    <div class="start-kd">
        <img src="images/logo.png" alt="小米图标" class="search-logo">
        <img src="images/clock.png" class="search-right">
        <p class="search-wz">4月14日开放购买</p>
        <button class="search-gwc"><img src="images/shopcar.png">购物车</button>
        <input type="text" class="search-box" placeholder="搜索你需要的商品">
        <a href="#" class="search-url-one">小米手环</a>
        <a href="#" class="search-url-two">耳机音箱</a>
        <a href="#" class="search-url-three">保护壳</a>
        <button class="search-hunt"><img src="images/fangdajing.png"></button>
    </div>

    <div class="hpn">
            <a href="#" class="hpn-one">全部商品分类</a>
            <p class="hpn-two">
                <a href="#" class="hpn-three" style="margin-left: 20px;">首页</a>
                <a href="#" class="hpn-three" style="margin-left: 85px;">小米手机</a>
                <a href="#" class="hpn-three" style="margin-left: 182px;">红米</a>
                <a href="#" class="hpn-three" style="margin-left: 247px;">小米平板</a>
                <a href="#" class="hpn-three" style="margin-left: 350px;">小米电视</a>
                <a href="#" class="hpn-three" style="margin-left: 451px;">盒子</a>
                <a href="#" class="hpn-three" style="margin-left: 521px;">路由器</a>
                <a href="#" class="hpn-three" style="margin-left: 607px;">合约机</a>
                <a href="#" class="hpn-three" style="margin-left: 693px;">服务</a>
                <a href="#" class="hpn-three" style="margin-left: 756px;">社区</a>
            </p>
    </div>

    <div class="list">
        <div class="list-one">
            <table>
                  <tr>
                      <td>
                          <p>购买手机</p>
                          小米Noto&nbsp;小米4&nbsp;红米&nbsp;红米Noto
                      </td>
                  </tr>
                  <tr>
                    <td>
                      <p>购买手机</p>
                      小米电视&nbsp;小米盒子&nbsp;小米平板
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>路由器与智能硬件</p>
                      路由器&nbsp;体重秤&nbsp;净化器与滤芯
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>插线板、移动电源与电池</p>
                      小米移动电源&nbsp;电池&nbsp;充电器
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>耳机音箱与存储卡</p>
                      小米头戴式耳机&nbsp;小米活塞耳机
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>保护套与贴膜</p>
                      保护套/保护壳&nbsp;贴膜&nbsp;防尘塞
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>后盖与个性化配件</p>
                      米键&nbsp;后盖&nbsp;贴纸&nbsp;手机支架
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <p>小米生活方式</p>
                      服装&nbsp;米兔&nbsp;背包&nbsp;生活周边
                    </td>
                  </tr>
            </table>
      </div>
      
      <!-- 轮播图 -->
      <div class="content">
        <div id="list">
            <img src="images/banner1.png" alt="">
            <img src="images/banner2.png" alt="">
            <img src="images/banner3.png" alt="">
            <img src="images/banner4.png" alt="">
            <img src="images/banner5.png" alt="">
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
     </div>

     <!-- 轮播图下面的图片 -->
     <div class="list-two">
      <table>
        <tr>
          <td class="list-pict">
             <img src="images/01.png">
          </td>
          <td class="list-pict">
             <img src="images/02.png">
          </td>
          <td class="list-pict">
             <img src="images/03.png">
          </td>
       </tr>
      </table>
     </div>
    </div>

    <div class="commodity">
      <p class="commodity-one">小米明星单品&nbsp;<span class="commodity-two">根据机型选配件</span></p>
      <div class="commodity-pict">
      <button style="width: 35px;height: 20px;margin-right: -6px;"><img src="images/05.png" ></button>
      <button style="width: 35px;height: 20px;"><img src="images/06.png"></button>
      </div>
      <table style="margin-top: 10px;">
        <tr>
          <td >
            <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg">
            <p class="commodity-zt">小米智能插座</p>
            <p class="commodity-zt-one">让普通家电变的智能</p>
          </td>
          <td >
            <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg">
            <p class="commodity-zt">小米空气净化器</p>
            <p class="commodity-zt-one">高性能智能空气净化器立即预约</p>
          </td>
          <td>
            <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg">
            <p class="commodity-zt">小米活塞耳机简装版</p>
            <p class="commodity-zt-one">好声音源自活塞式音腔，延续经典设计</p>
          </td>
          <td>
            <img src="images/aa.jpg">
            <p class="commodity-zt">小米路由器</p>
            <p class="commodity-zt-one">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
          </td>
        </tr>
      </table>
    </div>

    <!-- 新品上架 -->
    <div class="new">
     <p class="new-word">新品上架</p>
     <a href="#" class="new-word-one">更多></a>
     <table>
       <tr>
         <td colspan="2">
           <img src="images/fanghezi0407xiao.jpg" style="width: 537px;">
         </td>
         <td>
          <p >小米手环</p>
          <p >79元</p>
           <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg">
         </td>
       </tr>
       <tr>
         <td>
           <p>5周年米兔钥匙扣</p>
           <p>9.9元</p>
          <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg" style="margin-left: 100px; margin-top: -40px;margin-right: -80px;width: 140px;" >
         </td>
         <td rowspan="2">
           <p>小米T恤路标MILOGO</p>
           <p>39元</p>
          <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" style="margin-left: 40px;margin-right: -50px;">
         </td>
         <td rowspan="2">
           <p>小米4实木后盖</p>
           <p>69元</p>
           <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg">
         </td>
       </tr>
       <tr>
         <td>
           <p>QCY派Q8蓝牙耳机</p>
           <p>59.9元</p>
           <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg" style="margin-right: -61px;width: 130px;margin-left: 107px;margin-top: -40px;">
         </td>
       </tr>
       <tr>
         <td>
           <p>小米Note超薄保护壳</p>
           <p>49元</p>
           <img src="images/baohuke.png" style="margin-left: 50px;">
         </td>
         <td>
           <p>小米自拍杆</p>
           <p>49元</p>
           <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" >
         </td>
         <td>
           <p>先锋CL31系列耳式耳机</p>
           <p>99元</p>
           <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg">
         </td>
       </tr>

       <table class="new-list">
         <tr>
           <td>
             <p style="background-color: red;text-align: center;color: white;margin-left: 50px;margin-top: -10px;margin-bottom: 10px;width: 50px;">特价商品</p>
             <img src="images/T1ByZTBjJT1RXrhCrK.jpg" style="width: 50px;margin-left: 122px;">
             <p style="font-size: 13px;color: black;margin-top: -50px;">SanDisk32GB存储卡</p>
             <p style="color: red;">79元<span style="text-decoration: line-through;color: black;">109元</span></p>
             <p >还有更多特价商品</p>
           </td>
         </tr>
         <tr>
           <td>
             <p style="font-size: 13px;color: black;">特惠配件套餐</p>
             <p >手机必备配件组合购买</p>
             <p >实惠更优惠</p>
             <img src="images/channel-list-cool.jpg" style="width: 60px;margin-left: 114px;margin-top: -23px;">
           </td>
         </tr>
         <tr>
           <td >
             <p style="font-size: 13px;color: black;">我爱酷玩</p>
             <img src="images/channel-list-new.jpg" style="width: 55px;margin-left: 120px;margin-top: -3px;">
             <p style="margin-top: -54px;">邂逅炫酷的电子产品</p>
             <p >结交趣味相投的朋友</p>
           </td>
         </tr>
         <tr>
           <td style="line-height:  40px;">
             <a href="#" class="hy ">企业用户采购通道
             <i class="iconfont icon-dayuhao" ></i>
            </a>
            <p class="under"></p>
            <a href="#" class="hy-one">小米手机防伪查询
             <span style="margin-left: 50px;font-size: 16px;">></span>
            </a>
            <p class="under"></p>
            <a href="#" class="hy-one">小米手机官翻版
              <span style="margin-left: 62px;font-size: 16px;">></span>
             </a>
             <p class="under"></p>
             <a href="#" class="hy-one">小米路由器官翻版
              <span style="margin-left: 50px;font-size: 16px;">></span>
             </a>
             <p class="under"></p>
             <a href="#" class="hy-one">米粉红包
              <span style="margin-left: 98px;font-size: 16px;">></span>
             </a>
             <p class="under"></p>
             <p style="margin-top: 50px;font-size: 16px;margin-bottom: 10px;">话费充值</p>
             <input type="text" style="width: 160px;height: 20px; margin-bottom: 15px; "placeholder="请输入手机号">
             
             <select style="width: 164px;height: 25px;margin-bottom: 20px;">
               <option value="100元">100元</option>
               <option value="200元">200元</option>
               <option value="300元">300元</option>
               <option value="400元">400元</option>
              </select>

               <p>实付价格98.4元起</p>
               <button class="button">立即支付</button>

           </td>
         </tr>
       </table>
     </table>
    </div>

    <!-- 最后的底部 -->
    <div class="last-bottom">
       <div class="bottom-one">
         <div class="bopict-one">
           <img src="images/10.png" >
           <p style="margin-left: 25px;margin-top: 10px;color: rgb(140, 140, 140);">1小时快修服务</p>
         </div>  

        <div class="bopict-two">
          <img src="images/11.png">
          <p style="margin-left: -35px;margin-top: 10px;color: rgb(140, 140, 140);">7天无理由退货</p>   
        </div>

        <div class="bopict-three">
          <img src="images/12.png">
          <p style="margin-left: -35px;margin-top: 10px;color: rgb(140, 140, 140);">15天免费换货</p>
        </div>
           
        <div class="bopict-four">
          <img src="images/13.png">
          <p style="margin-left: -35px;margin-top: 10px;color: rgb(140, 140, 140);">满150元包邮</p>
        </div>

        <div class="bopict-five">
          <img src="images/14.png">
          <p style="margin-left: -35px;margin-top: 10px;color: rgb(140, 140, 140);">520余家售后网点</p>
        </div>


        <hr style="margin-top: 30px;">

        <table class="help" cellspacing=0 cellpadding=0 >
          <tr>
            <td class="right">帮助中心</td>
            <td class="right">服务支持</td>
            <td class="right">小米之家</td>
            <td class="right">关于小米</td>
            <td class="right">关注我们</td>
            <td class="bard-right bard-right-fize">400-100-5678</td>
          </tr>
          <tr>
            <td class="right"><a href="#">购物指南</a></td>
            <td class="right"><a href="#">售后政策</a></td>
            <td class="right"><a href="#">小米之家</a></td>
            <td class="right"><a href="#">了解小米</a></td>
            <td class="right"><a href="#">新浪微博</a></td>
            <td class="bard-right">周一至周日8:00-18：00</td>
          </tr>
          <tr>
            <td class="right"><a href="#">支付方式</a></td>
            <td class="right"><a href="#">自助服务</a></td>
            <td class="right"><a href="#">服务网店</a></td>
            <td class="right"><a href="#">加入小米</a></td>
            <td class="right"><a href="#">小米部落</a></td>
            <td class="bard-right">(仅收市话费)</td>
          </tr>
          <tr>
            <td class="right"><a href="#">配送方式</a></td>
            <td class="right"><a href="#">相关下载</a></td>
            <td class="right"><a href="#">预约亲临到店服务</a></td>
            <td class="right"><a href="#">联系我们</a></td>
            <td class="right"><a href="#">官方微信</a></td>
            <td class="bard-right "><button class="help-button">24小时在线客服</button></td>
          </tr>
        </table>

       <hr style="margin-top: 20px;">

        <div class="botton-last">
          <p>小米旗下网站：小米网<span>|</span>MIUI<span>|</span>米聊<span>|</span>多看书城<span>|</span>小米路由器<span>|</span>繁体香港<span>|</span>繁体台湾<span>|</span>English<span>|</span>小米后院<span>|</span>小米天猫店<span>|</span>小米淘宝自营对<span>|</span>小米网盟</p>
          <p>&copy;mi.com京ICP证110507号京ICP备10046444号京公网安备1101080212535号京网文[2014]0059-0009号</p>
          <img src="images/16.png" style="margin-top: 20px;margin-bottom: -8px;">
          <select style="width: 164px;height: 30px;margin-bottom: 20px;">
            <option value="简体中文">简体中文</option>
            <option value="繁体中文">繁体中文</option>
            <option value="英语">英语</option>
            <option value="其他语言">其他语言</option>
           </select>
        </div>
       
       </div>
    </div>
 



    <!-- 轮播图js -->
    <script>
        //1定义右边的按钮
        //定义index变量显示图片的下标值
        var index =0;
        $("#next").click(function(){
            index++;
            if(index>4){
                index=0;
            }
            console.log(index)
            $("#list img").eq(index).fadeIn().siblings().fadeOut()
            //3焦点随按钮改变
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        })

        //2定义左边的按钮
        $("#prev").click(function(){
            index--;
            if(index<0){
            index=4;
        }
        console.log(index)
        //先找到按钮的所以下标值
        $("#list img").eq(index).fadeIn().siblings().fadeOut()
       //3焦点随按钮改变
        $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
        })

        //4点击焦点换图
       $("#btns span").click(function(){
           //重置下标值，就不要let
           index=$(this).index();
           //先找到按钮的所以下标值
           $("#list img").eq(index).fadeIn().siblings().fadeOut()
           //先让焦点随下标值变动
           $("#btns span").eq(index).addClass("current").siblings().removeClass("current")
           
       })



    </script> 
</body>
</html>